import React, { memo, useEffect, useState } from 'react';
import { Spin, DatePicker } from 'antd';
import moment from 'moment';

import { isSuccess } from '@/utils/request';
import { queryGlobalData } from '@/services/salaryManage/salaryChart';

import SalaryItemCard from './component/SalaryItemCard';
import CustomPopover from './component/CustomPopover';
import ChartWrapper from './component/ChartWrapper';
import SettingItems from './component/SettingItems';
import EmptyWrapper from './component/EmptyWrapper';
import useTotalSetting from './hooks/useTotalSetting';

import { isEmptyObj } from './paramMap';

import styles from './style.less'

const { MonthPicker } = DatePicker;

const SalaryOverviews = memo(({ organizationCode, globalInfo }) => {
    const [loading, setLoading] = useState(false)
    const [infoData, setInfoData] = useState({})
    const [salaryMap, setSalaryMap] = useState({})

    // 查询
    const queryFn = async (year, month) => {
        setLoading(true)
        const globalListRequest = await queryGlobalData({
            organizationCode,
            year: year || infoData.year,
            month: month || infoData.month
        })
        if (isSuccess(globalListRequest)) {
            setSalaryMap(globalListRequest.data)
        } else {
            setSalaryMap({})
        }
        setLoading(false)
    }

    useEffect(() => {
        setInfoData(JSON.parse(JSON.stringify(globalInfo || {})))
    }, [globalInfo])

    useEffect(() => {
        if (infoData && infoData.year && infoData.month) {
            queryFn()
        }
    }, [infoData])

    // 总览设置回调
    const changeSettingHandle = val => {
        setInfoData({
            ...infoData,
            globalItemInfoList: val
        })
    }

    // 月份切换
    const onChange = (val, dateString) => {
        setInfoData({
            ...infoData,
            year: dateString.substr(0, 4),
            month: Number(dateString.substr(5))
        })
    }

    const {
        onShowTotalSetting,
        render: renderTotalSetting
    } = useTotalSetting(organizationCode, infoData, changeSettingHandle);
    const period = infoData.year && infoData.month ?
        moment(`${infoData.year}-${infoData.month < 10 ? '0' : ''}${infoData.month}`) : null

    // 设置按钮
    const SettingWrapper = () => (
        <>
            <MonthPicker
                onChange={onChange}
                value={period}
                style={{ width: '210px' }}
                allowClear={false}
                />
            <SettingItems title="总览设置" onClick={onShowTotalSetting}/>
        </>
    )

    // 警示提醒
    const PopoverContent = ({ type }) => {
        const { globalItemInfoList = [] } = infoData
        const salaryItem = globalItemInfoList.filter(item => item.globalType === type);
        const { remindNum, warnNum } = salaryItem[0]
        return (
            <>
                <div>超过{warnNum}%时警示</div>
                <div>超过{remindNum}%时提醒</div>
            </>
        )
    }

    const TotalTitle = () => {
        const includeKpi = infoData.globalItemInfoList?.filter(item => item.globalType === 'globalTotalAmount')[0]?.isContainKpi || false
        return `合计薪资${includeKpi ? '' : '不'}含绩效薪资：`
    }

    return (
        <Spin spinning={loading}>
            <ChartWrapper title="薪资总览" settingWrapper={<SettingWrapper />} >
                {
                    isEmptyObj(salaryMap) && !loading ?
                        <EmptyWrapper handle={onShowTotalSetting} /> :
                        (
                            <div className={styles.salaryTotal}>
                                <div className={styles.leftMain}>
                                    <div className={styles.salaryItem}>
                                        <div className={styles.salaryItemInfo}>
                                            <span>合计金额</span>
                                            <CustomPopover content={<PopoverContent type="globalTotalAmount"/>} title={<TotalTitle />} />
                                        </div>
                                        <div className={styles.salaryItemList}>
                                            {salaryMap?.totalAmtList?.map(item =>
                                                <SalaryItemCard cardData={item} key={JSON.stringify(item)} />)
                                            }
                                        </div>
                                    </div>
                                    {
                                        salaryMap.salaryAddItemList?.length > 0 ? (
                                            <div className={styles.salaryItem}>
                                                <div className={styles.salaryItemInfo}>
                                                    <span>薪资加项</span>
                                                    <CustomPopover content={<PopoverContent type="globalSalaryAdd"/>} />
                                                </div>
                                                <div className={styles.salaryItemList}>
                                                    {salaryMap?.salaryAddItemList?.map(item =>
                                                        <SalaryItemCard cardData={item} key={JSON.stringify(item)} />)}
                                                </div>
                                            </div>
                                        ) : null
                                    }
                                    {
                                        salaryMap.salarySubItemList?.length > 0 ? (
                                            <div className={styles.salaryItem}>
                                                <div className={styles.salaryItemInfo}>
                                                    <span>薪资减项</span>
                                                    <CustomPopover
                                                        content={<PopoverContent type="globalSalarySub" />} />
                                                </div>
                                                <div className={styles.salaryItemList}>
                                                    {salaryMap?.salarySubItemList?.map(item =>
                                                        <SalaryItemCard cardData={item} key={JSON.stringify(item)} />)}
                                                </div>
                                            </div>
                                        ) : null
                                    }
                                </div>
                                <div className={styles.rightInfo}>
                                    <p className={styles.warning}>警示</p>
                                    <p className={styles.remind}>提醒</p>
                                </div>
                            </div>
                        )
                }
            </ChartWrapper>
            {renderTotalSetting()}
        </Spin>
    )
})

export default SalaryOverviews
